<template>
    <div class="enterprises-content" v-loading="infoLoading">
      <!--  参会企业-->
        <template v-if="enterpriseList && enterpriseList.length>0">
          <div @click="showPositions(item.id)" class="enterprise" 
          v-for="item in enterpriseList" 
          :key="item.id">
            <!-- <img :src="item.logoUrl" alt=""> -->
            <div class="content">
              <div class="abbreviation">{{ item.companyName }}</div>
              <div class="full-name">招聘岗位：{{ item.positionCount }}个</div>
              <div class="count">地址：{{ item.address }}</div>
            </div>
          </div>
        </template>
      <el-empty v-else style="display: flex;justify-content: center;align-items: center;margin: 0 auto"></el-empty>
      <div v-if="total > limit" class="pagination">
        <el-pagination
          background
          :page-size="limit"
          layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
          :current-page="page">
        </el-pagination>
      </div>

      <!-- 岗位弹窗 -->
      <el-dialog
        title="参会岗位"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose">
        <div v-loading="positionsLoading">
          <!-- 公司信息 -->
          <div class="company-info" v-if="currentCompany">
            <div class="info-item">
              <span class="label">公司名称：</span>
              <span class="value">{{currentCompany.companyName}}</span>
            </div>
            <div class="info-item">
              <span class="label">招聘负责人：</span>
              <span class="value">{{currentCompany.recruitmentPerson || '暂无'}}</span>
            </div>
            <div class="info-item">
              <span class="label">联系电话：</span>
              <span class="value">{{currentCompany.contact || '暂无'}}</span>
            </div>
          </div>
          <div class="divider"></div>
          <!-- 岗位列表 -->
          <div v-if="positionsList.length > 0">
            <div v-for="item in positionsList" :key="item.id" class="position-item">
              <h3 class="position-title">{{item.name}}</h3>
              <div class="position-desc">{{item.content}}</div>
              <div class="divider"></div>
            </div>
          </div>
          <el-empty v-else></el-empty>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import { queryFairEnterpriseApi, getPositionByFairApi } from "@/api/fair";

export default {
  name: "Enterprises",
  data(){
    return{
      infoLoading: false,
      positionsLoading: false,
      page: 1,
      limit: 10,
      total: 0,
      dialogVisible: false,
      currentCompany: null,
      enterpriseList: [
        {
          id:1,
          companyName:'',
          positionCount:0,
          address:''
        }
      ],
      positionsList: []
    }
  },
  methods:{
    getList() {
      this.infoLoading = true
      queryFairEnterpriseApi({
        pageNum: this.page,
        pageSize: this.limit,
        fairId: this.id
      }).then((res) => {
        if(res && res.records) {
          this.enterpriseList = res.records;
          this.total = res.total;
        }
      }).finally(() => {
        this.infoLoading = false
      })
    },
    showPositions(companyId) {
      this.dialogVisible = true;
      this.positionsLoading = true;
      // 设置当前公司信息
      this.currentCompany = this.enterpriseList.find(item => item.id === companyId);
      getPositionByFairApi({
        sId: this.id,
        cId: companyId
      }).then(res => {
        this.positionsList = res.jobPublishList || [];
      }).finally(() => {
        this.positionsLoading = false;
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.positionsList = [];
      this.currentCompany = null;
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    }
  },
  mounted() {
    this.utils.createParams(this,this.$route.query);
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.enterprises-content{
  display: flex;
  flex-direction: column;
  width: 750px;
  .enterprise{
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 150px;
    padding: 15px;
    border-radius: 20px;
    margin: 10px 0;
    border: 3px solid #498CF3;
    cursor: pointer;
    &:hover {
      background-color: #f5f7fa;
    }
    img{
      width: 115PX;
      height: 115px;
      margin-right: 15px;
    }
    .content{
      display: flex;
      flex-direction: column;
      line-height: 35px;
      .abbreviation{
        width: calc((100% - 130px)/1);
        font-size: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .full-name{
        width: calc((100% - 130px)/1);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .count{
        width: calc((100% - 130px)/1);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}

.position-item {
  margin-bottom: 20px;
  .position-title {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
  }
  .position-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
  }
  .divider {
    margin: 15px 0;
    border-bottom: 1px solid #eee;
  }
}

.company-info {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  
  .info-item {
    margin-bottom: 12px;
    font-size: 14px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .label {
      color: #666;
      margin-right: 10px;
      display: inline-block;
      width: 85px;
    }
    
    .value {
      color: #333;
      font-weight: 500;
    }
  }
}

.divider {
  margin: 15px 0;
  border-bottom: 1px solid #eee;
}
</style>
